// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-beta';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly';
@import '../protocol/components/sub-navigation';

// * -------------------------------------------------------------------------- */
// Content

#beta .mzp-l-content,
#developer .mzp-l-content,
#nightly .mzp-l-content,
#testflight .mzp-l-content {
    max-width: $content-lg;
}

// * -------------------------------------------------------------------------- */
// Call-outs

.mzp-c-call-out {
    background-color: $color-marketing-gray-20;
}

.mzp-c-call-out-compact {
    background: transparent;

    @media #{$mq-md} {
        &.mzp-t-product-firefox,
        &.mzp-t-product-beta,
        &.mzp-t-product-developer,
        &.mzp-t-product-nightly,
        &.mzp-t-product-focus {
            .mzp-c-call-out-content {
                @include background-size($layout-xl $layout-xl);
                @include bidi(((padding, 0 0 0 $layout-2xl, 0 $layout-2xl 0 0),));
            }
        }
    }
}

.show-linux {
    display: none;
}

.linux .show-linux {
    display: block;
}

.l-notes {
    @include text-body-sm;
    max-width: $screen-lg;

    &.mzp-l-content {
        padding-top: 0;
    }

    ul li {
        @include text-body-md;
    }
}

.learn-more {
    @include text-body-md;
    display: block;
    margin-top: $spacing-md;
    text-align: center;
}

// *------------------------------------------------------------------*/
// Newsletter
// styles from developer/includes/newsletter.scss

.t-newsletter {
    padding: $layout-md $layout-xs;

    .mzp-l-content {
        max-width: $content-sm;
        min-width: 0;
        padding-bottom: $layout-md;
        padding-top: $layout-md;
        background: $color-white;
        border-radius: $border-radius-md;
        box-shadow: $box-shadow-md;
    }

    .mzp-c-newsletter-content {
        margin-bottom: 0;
    }

    .mzp-c-newsletter-form {
        padding-top: 0;
        @include font-size(14px);

        input[type='email'],
        select {
            min-width: 0; // https://github.com/mozilla/protocol/issues/607
        }

        label[for='id_email'] {
            @include visually-hidden;
        }

        legend {
            @include font-size(14px);
        }
    }

    .mzp-c-newsletter-title {
        @include font-size(24px);
        margin-bottom: $layout-2xs;
    }

    .mzp-c-newsletter-tagline {
        margin-bottom: $layout-sm;

        br {
            display: none;
        }
    }

    .mzp-c-newsletter-details {
        text-align: left;
    }

    .mzp-c-form-submit {
        margin-bottom: 0;
    }

    .mzp-c-fieldnote {
        margin-top: $spacing-xs;
    }

    .mzp-c-newsletter-thanks {
        padding-top: 0;

        h3 {
            @include font-size(24px);
        }

        p {
            margin-bottom: 0;
        }
    }

    @media #{$mq-md} {
        padding: $layout-md $layout-md;

        .mzp-l-content {
            max-width: $content-xl;
        }

        .mzp-c-newsletter-form {
            display: grid;
            grid-column-gap: $layout-md;
            grid-template-columns: auto $content-xs;
        }

        .mzp-c-newsletter-tagline,
        .mzp-c-button {
            margin-bottom: 0;
        }
    }

    @media #{$mq-lg} {
        .mzp-l-content {
            padding-right: $layout-md;
            padding-left: $layout-md;
        }

        .mzp-c-newsletter-form {
            grid-column-gap: $layout-lg;
            padding-left: 84px + $layout-md; // width of icon
            background: url('/media/img/firefox/developer/mail.svg') top left no-repeat;
        }
    }
}
